<template>
  <div class="statute">
    <h1
      style="
        font-weight: 700;
        font-style: normal;
        font-size: 24px;
        color: #344563;
      "
    >
      法规管理
    </h1>
    <el-button
      type="primary"
      class="addFile"
      size="medium"
      round
      @click="addStatute"
      >添加文件</el-button
    >
    <el-form :inline="true" class="demo-form-inline">
      <div style="display: flex; justify-content: space-between">
        <el-form-item label="法规名称 ">
          <el-input
            v-model="statuteName"
            placeholder="请输入法规关键词"
          ></el-input>
        </el-form-item>

        <el-form-item label="法规类型">
          <el-select v-model="statuteTypeNa" placeholder="法规类型" clearable>
            <el-option
              :key="v.statuteTypeId"
              v-for="v in statuteType"
              :label="v.statuteTypeName"
              :value="v.statuteTypeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-zoom-in"
            size="mediu"
            @click="onSearch"
            >查询</el-button
          >
          <el-button
            type="info"
            icon="el-icon-refresh-right"
            size="mediu"
            @click="onRest"
            >重置</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <!-- 表单数据 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="statuteName" label="法规名称"> </el-table-column>
      <el-table-column prop="statuteType.statuteTypeName" label="法规类型">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="140" align="center">
        <template slot-scope="scope">
          <el-button
            class="edit_btn"
            type="primary"
            icon="el-icon-edit-outline"
            @click="openEdit(scope.row)"
            size="small"
          >
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="pagination">
      <div style="display: flex; align-items: center; margin-left: 300px">
        <span style="font-size: 13px; font-weight: bold"
          >共{{ Math.ceil(total / limit) }}页/{{ total }}条数据</span
        >
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="page"
            :page-size="limit"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      statuteName: "",
      statuteTypeNa: "",
      statuteType: [],
      tableData: [],
      page: 1,
      limit: 5,
      total: 0,
    };
  },
  methods: {
    getData: function () {
      this.$axios({
        url: "/statute/list",
        method: "post",
        data: {
          limit: this.limit,
          page: this.page,
          statuteName: this.statuteName,
          statuteTypeId: this.statuteTypeNa,
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == 0) {
          this.tableData = data.data;
          this.total = data.total;
        }else{
          this.$message.error("网络错误！数据加载出错！");

        }
      });
    },
    //下拉框
    toXl: function () {
      this.$axios({
        url: "/statuteType/list",
        method: "post",
        data: {
          limit: 20,
          page: 1,
        },
      }).then(({ data }) => {
        console.log(data);
        this.statuteType = data.data;
      });
    },
    //重置
    onRest: function () {
      this.page = 1;
      this.statuteName = "";
      this.statuteTypeNa = "";
      this.getData();
    },
    //查询
    onSearch: function () {
      this.getData();
    },
    //添加法规
    addStatute: function () {
      this.$router.push("/home/Fgtj");
    },
    //修改
    openEdit: function (row) {
      this.$store.state.xjqVuex.statute = row;
      sessionStorage.setItem("statute", JSON.stringify(row));
      this.$router.push("/home/Fgbj");
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
  },
  mounted: function () {
    this.getData();
    this.toXl();
  },
};
</script>

<style lang="less" scoped>
.statute {
  padding: 40px;
}
.addFile {
  border: none;
  margin-top: 30px;
  margin-bottom: 30px;
}
.del_btn {
  font-size: 14px;
  color: #ffc5c5;
  background: #fef3f3;
  border-color: #fef3f3;
}

.edit_btn {
  font-size: 14px;
  color: #5fa4e2;
  background: #eef6fc;
  border-color: #eef6fc;
}
.pagination {
  margin-top: 50px;
  float: right;
  margin-right: 20px;
}
</style>